<template>
  <div class="star" :class="starType">
     <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></span>
  </div>
</template>
<script>
    const LENGTH = 5;
    const CLS_ON ='on';
    const CLS_HALF = 'half';
    const CLS_OFF = 'off';
export default {
  props:{
      size:{
          type:Number
      },
      score:{
          type:Number
      }
  },
  computed:{
      starType(){
          return 'star-' + this.size;
      },
      itemClasses() {
          let result = [];
          let score = Math.floor(this.score * 2) / 2; // 0.6，0.4 经过floor函数之后都会变成0 floor()方法返回小于等于x的最大整数,这个表达式就是为了四舍五入而做的
          let hasDecimal = score % 1 !== 0;
          let integer = Math.floor(score);
          for(let i=0;i<integer;i++ ){
              result.push(CLS_ON);
          }
          if (hasDecimal) {
              result.push(CLS_HALF);
          }
          while(result.length < LENGTH){
              result.push(CLS_OFF);
          }
          return result;
      }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
     @import "../../common/stylus/mixin";
    .star
        font-size :0
        .star-item
            display: inline-block
            background-repeat : no-repeat
        &.star-48       //&符号表示当前选择对象，这里的完整意思是当前选择对象(class='star')下的同级(class='star-48')
            .star-item
               width: 20px
               height : 20px
               margin-right :22px
               background-size : 20px 20px
               &:last-child    //最后一个星星是没有margin-right的
                   margin-right :0
               &.on
                   bg-image('star48_on')
               &.half
                   bg-image('star48_half')
               &.off
                   gb-image('star48_off')    
        &.star-36
            .star-item
               width: 15px
               height : 150px
               margin-right :16px
               background-size : 15px 15px
               &:last-child    //最后一个星星是没有margin-right的
                   margin-right :0
               &.on
                   bg-image('star36_on')
               &.half
                   bg-image('star36_half')
               &.off
                   gb-image('star36_off')   
        &.star-24
            .star-item
               width: 10px
               height : 10px
               margin-right :3px
               background-size : 10px 10px
               &:last-child    //最后一个星星是没有margin-right的
                   margin-right :0
               &.on
                   bg-image('star24_on')
               &.half
                   bg-image('star24_half')
               &.off
                   gb-image('star24_off')
</style>


